<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Button</view>
			<view class="tui-page__desc">按钮，支持设置宽高，支持表单提交</view>
		</view>
		<view class="tui-page__bd  tui-page__spacing">
			<tui-button margin="0 0 30rpx 0" :size="34" bold>页面主操作</tui-button>
			<tui-button margin="0 0 30rpx 0" disabled loading :size="34" bold>页面主操作 Loading</tui-button>
			<tui-button margin="0 0 30rpx 0" disabled disabledGray :size="34" bold>页面主操作 disabled</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-primary">页面主操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-danger">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-green">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="gray-warning">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="warning">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="green">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="danger">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="black">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold type="white">页面次要操作</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold plain type="danger">页面次要操作 空心</tui-button>
			<tui-button margin="0 0 30rpx 0" :size="34" bold plain link type="danger">页面次要操作 link</tui-button>
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="contact">打开客服会话</tui-button>
			</view>
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="share">触发用户转发</tui-button>
			</view>
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="getPhoneNumber" @getphonenumber="handleGetPhoneNumber">获取用户手机号</tui-button>
			</view>
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="getUserInfo">获取用户信息</tui-button>
			</view>
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="openSetting">打开设置权限页</tui-button>
			</view>
			<!-- #ifndef H5 -->
			<view class="tui-btn__box">
				<tui-button width="372rpx" height="84rpx" :size="34" bold type="green" open-type="feedback">打开意见反馈</tui-button>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleGetPhoneNumber(e){
				 console.log(e.detail)
			}
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI示例'
			};
		}
	}
</script>

<style>
  .tui-btn__box{
	  width: 100%;
	  box-sizing: border-box;
	  padding: 20rpx;
	  display: flex;
	  justify-content: center;
  }
</style>
